require(['config'], () => {
  require(['jquery', 'artTemplate', 'cookie', 'include'], ($, template) => {
    class CartPage {
      constructor() {
        this.cart = []
        $.cookie.json = true // 自动转换 cookie 值

        this.loadCart()
        this.render()
        this.bindEventListener()
      }

      /**
       * 加载本地保存的购物车数组
       */
      loadCart() {
        this.cart = $.cookie('cart') || []
      }

      /**
       * 渲染购物车商品的布局
       */
      render() {
        // 购物车中行的商品数据
        const html = template('cart-template', {cart: this.cart})
        $('.cart-body').html(html)
        // 合计金额
        const total = this.cart.reduce((result, item) => {
          if (item.checked) {
            result += item.price * item.amount
          }
          return result
        }, 0)
        $('.total').html(total)
        // 将 cookie 中保存的值与当前操作完的购物车数组保持同步
        $.cookie('cart', this.cart, {expires: 10})
        // 全选 框的选中状态
        $('.check_all').prop('checked', $('.check_prod:checked').length === this.cart.length)
      }

      // 从购物车中移除商品
      removeFromCart(e) {
        // // DOM 操作的删除
        // console.log($(e.target).parents('.cart_topnav'))
        // console.log($(e.target).parent().parent())
        // $(e.target).parents('.cart_topnav').remove()

        // 通过删除数组元素来实现删除
        const id = $(e.target).parents('.cart_topnav').data('id')
        this.cart = this.cart.filter(item => item.id !== id)
        this.render()

        // 重新保存 cookie
        // TODO...
      }

      // 修改购物车中商品数量
      modifyAmount(e) {
        // // DOM 操作修改
        // const src = $(e.target)
        // const parent = src.parent()
        // const price = Number(parent.prev().html())
        // let amount = Number(src.siblings('.amount').val())
        // console.log(amount)
        // if (src.is('.plus')) { // 加数量
        //   amount += 1
        // } else { // 减数量
        //   if (amount <= 1) {
        //     return
        //   }
        //   amount -= 1
        // }
        // src.siblings('.amount').val(amount)
        // parent.next().html(price * amount)

        // 修改数据，重新渲染
        const src = $(e.target)
        const id = src.parents('.cart_topnav').data('id')
        this.cart.forEach(item => {
          if (item.id === id) {
            if (src.is('.plus')) { // 加数量
              item.amount += 1
            } else if (src.is('.minus')) { // 减数量
              if (item.amount <= 1) {
                return
              }
              item.amount -= 1
            } else if (src.is('.amount')) { // 文本框
              // 获取文本框中输入的值
              const _amount = src.val()
              if (!/^\+?[1-9][0-9]*$/.test(_amount)) {
                console.log('数量格式有误')
              } else {
                item.amount = Number(_amount)
              }
            }
          }
        })
        this.render()

        // 保存 cookie
        // TODO...
      }

      // 处理全选
      handleCheckAll(e) {
        // 获取全选复选框的选中状态
        const checked = $(e.target).prop('checked')
        // 设置所有购物车商品选中状态与“全选”框状态一致
        this.cart.forEach(item => item.checked = checked)
        // 重新渲染
        this.render()
      }

      // 商品行前复选框处理
      handleCheckParts(e) {
        // 修改当前行数据的选中状态
        const id = $(e.target).parents('.cart_topnav').data('id')
        this.cart.forEach(item => {
          if (item.id === id) {
            item.checked = $(e.target).prop('checked')
          }
        })

        this.render()

        // // 获取商品行前复选框选中时的总个数
        // const len = $('.check_prod:checked').length
        // // 设置“全选”复选框的选中状态
        // $('.check_all').prop('checked', len === this.cart.length)
        // if (len === this.cart.length) {
        //   $('.check_all').prop('checked', true)
        // } else {
        //   $('.check_all').prop('checked', false)
        // }
      }

      // 反选
      handleCheckOper() {
        this.cart.forEach(item => {
          item.checked = !item.checked
        })
        this.render()
        // $('.check_all').prop('checked', $('.check_prod:checked').length === this.cart.length)
      }

      // 删除选中
      handleRemoveChecked() {
        // 获取选中项，遍历每一个，获取所在行中商品id，在数组中进行过滤
        $('.check_prod:checked').each((index, dom) => {
          const id = $(dom).parents('.cart_topnav').data('id')
          this.cart = this.cart.filter(item => item.id !== id)
        })
        // 重新渲染
        this.render()
      }

      // 清空购物车
      handleClear() {
        this.cart = []
        this.render()
      }

      /**
       * 注册事件监听
       */
      bindEventListener() {
        // 删除
        $('.cart-body').on('click', '.btn-remove', this.removeFromCart.bind(this))

        // 数量修改
        $('.cart-body').on('click', '.minus, .plus', this.modifyAmount.bind(this))
        $('.cart-body').on('blur', '.amount', this.modifyAmount.bind(this))

        // 全选
        $('.check_all').on('change', this.handleCheckAll.bind(this))

        // 商品行前的选中
        $('.cart-body').on('change', '.check_prod', this.handleCheckParts.bind(this))

        // 反选
        $('.check_oper').on('click', this.handleCheckOper.bind(this))

        // 删除选中
        $('.remove_checked').on('click', this.handleRemoveChecked.bind(this))

        // 清空购物车
        $('.clear_cart').on('click', this.handleClear.bind(this))
      }
    }

    new CartPage()
  })
})
